<script setup>
// 导入 watch 函数
  import { watch, ref } from 'vue';

// 声明数据
  const count = ref(0);
  const nickName = ref('张三');

// 监听数据变化
const changeCount = () => {
  count.value++;
}
const changeNickName = () => {
  nickName.value = '李四';
}

// 监听单个数据变化
watch(count, (newValue, oldValue) => {
  console.log('count变化了', newValue, oldValue);
});

// 监视多个数据变化,每一个数据变化都会触发一次
watch([count, nickName], ([newCount, newNickName], [oldCount, oldNickName]) => {
  console.log('count和nickName变化了', newCount, oldCount, newNickName, oldNickName);
});

// 
</script>

<template>
<div>
  <div>{{ count }}</div>
  <button @click="changeCount">改数字</button>

  <div>{{ nickName }}</div>
  <button @click="changeNickName">改名字</button>
</div>

</template>